<template>
    <div id="zhe"></div>
</template>

<script>
import * as echarts from 'echarts';
import moment from 'moment';

export default {
    name: 'Zhe',
    props: ['dataList'],
    data() {
        return {
            xAxisTextList: [],
            achieveTimeList: [],
            notAchieveTimeList: [],
            achieveCountList: [],
        };
    },

    mounted() {
        this.getxAxistextList()
        this.initZhe()
    },
    watch: {
        dataList: {
            handler(dataList) {
                this.getData(dataList)
                this.initZhe()
            },
            deep: true
        }
    },
    methods: {
        moment,
        initZhe() {
            let chartDom = document.getElementById('zhe');
            let myChart = echarts.init(chartDom);
            let option;
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    },
                    top: 'bottom'
                },
                legend: {
                    data: ['已完成', '已放弃', '完成次数']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.xAxisTextList,
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '计时量',
                        min: 0,
                        max: 300,
                        interval: 50,
                        axisLabel: {
                            formatter: '{value} min'
                        },
                    },
                    {
                        type: 'value',
                        name: '次数',
                        min: 0,
                        max: 12,
                        interval: 2,
                        axisLabel: {
                            formatter: '{value} 次'
                        }
                    },

                ],
                series: [
                    {
                        name: '已完成',
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' min';
                            }
                        },
                        data: this.achieveTimeList
                    },
                    {
                        name: '已放弃',
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' min';
                            }
                        },
                        data: this.notAchieveTimeList
                    },
                    {
                        name: '完成次数',
                        type: 'line',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' 次';
                            }
                        },
                        data: this.achieveCountList
                    }
                ]
            };
            option && myChart.setOption(option);
            window.onresize = function () {
                myChart.resize();
            };
        },
        getData(dataList) {
            let weekData = this.getWeekData(dataList)
            console.log(weekData)
            weekData.map(item => {
                if (item.length == 0) {
                    this.achieveTimeList.push(0)
                    this.notAchieveTimeList.push(0)
                    this.achieveCountList.push(0)
                } else {
                    let achieveTimeItem = 0;
                    let notAchieveTimeItem = 0;
                    let achieveCountItem = 0;
                    item.map(i => {
                        let arr = i.settingTime.split(' : ')
                        let time = Math.ceil((arr[0] * 60 + arr[1] * 1 + arr[2] / 60) * 100) / 100
                        if(i.isAchieve == 'true') {
                            achieveTimeItem += time
                            achieveCountItem++
                        } else {
                            notAchieveTimeItem += time
                        }
                    })
                    this.achieveTimeList.push(achieveTimeItem)
                    this.notAchieveTimeList.push(notAchieveTimeItem)
                    this.achieveCountList.push(achieveCountItem)
                }

            })

        },
        // 设置x轴即xAxis 配置，显示最近七天
        getxAxistextList() {
            let arr = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            let curWeekText = moment().format("dddd").slice(0, 3)
            let curWeekTextIndex = arr.findIndex(item => item == curWeekText)
            let xAxisArr = arr.slice(curWeekTextIndex + 1).concat(arr.slice(0, curWeekTextIndex + 1))
            xAxisArr[xAxisArr.length - 1] = 'Today'
            this.xAxisTextList = xAxisArr
        },
        // 得出最近一周数据
        getWeekData(dataList) {
            // 初始化二维数组
            let weekData = Array(7)
                .fill([])
                .map(() => Array().fill([]));

            dataList.map(item => {
                // 时间加7天
                let addWeek = moment(item.saveTime).add(7, 'days')
                // 加7天若和现今月份相同
                if (addWeek.format("M") == moment().format("M")) {
                    let site = addWeek.format("D") * 1 - moment().format("D") * 1
                    // 加7天若大于现今日份
                    if (site >= 0) {
                        // 则此记录是距今7天内数据
                        weekData[site - 1].push(item)
                    }
                }
            })
            return weekData
        }
    },
};
</script>

<style lang="less" scoped>
#zhe {
    height: 45vh;
    padding: 10px;
}
</style>